<template>
  <div class="page" :style="{ height: bodyHeight + 'px' }">
    <div class="header">
        <img
          src="@/assets/img/login/login-bg.png"
          alt=""
          class="max-logo"
          srcset=""
        />

    </div>

    <div class="footer">

      <div v-if="type == 1" class="inpBox">
        <input
          type="text"
          v-model="userName"
          class="inp userName"
          placeholder="请输入登录账号"
        />
      </div>
      <div v-if="type == 1" class="inpBox">
        <input
          :type="passwordCheck ? 'text' : 'password'"
          v-model="userPossword"
          class="inp password"
          placeholder="请输入密码"
        ></input>
        <div style="width: 18px;height: 18px;" class="password-visible" @click="passwordCheck=!passwordCheck">
          <img v-if='passwordCheck' src="../../assets/img/login/password-visible.png" alt="">
          <img v-else src="../../assets/img/login/password-novisible.png" alt="">
        </div>
      </div>
      <div v-if="type == 1" class="inpBox">
        <input
          type="text"
          v-model="yzmCode"
          class="inp yzmCode"
          placeholder="请输入验证码"
          style="width: 60%;"
        />
        <div class="yzm-code" @click="isChange">
          <img
            v-if="yzmUrl != '' && yzmUrl != null"
            :src="yzmUrl"
            style="height:35px;width:110px"
          />
        </div>
      </div>

      <div class="loginBtn" @click="login()">登录</div>

      <div v-if="type == 1" class="passwordBox">
        <!-- <van-checkbox v-model="isKeep">记住账号</van-checkbox> -->
        <div @click="forgetPasswordOnclick()">忘记登录密码</div>
       <div style="margin-left:60px;color:#37B5B5;" @click="reginer()">立即注册</div>

      </div>

    </div>
  </div>
</template>

<script>
import { Toast, Checkbox, CheckboxGroup, Switch } from 'vant'
import { getValue, setValue, setObject, clear } from '@/utils/auth'
import { postHandle, getHandle } from '@/api'
import crypto from 'crypto'
export default {
  components: {
    [Toast.name]: Toast,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Switch.name]: Switch
  },
  data() {
    const loginPageUserName = getValue('loginPageUserName')
    return {
      passwordCheck: false,
      type: 1,
      isKeep: !!loginPageUserName,
      userName: loginPageUserName,
      userPossword: '',

      loginData: {},
      yzmUrl: '',
      yamId: '',
      codeImgId: '',
      yzmCode: '',
      form: {
        mobilePhone: ''
      },
      code: '',

      text: '获取验证码',
      num: 59,
      bodyHeight: ''
    }
  },
  created() {
    this.getYzmCode()
  },
  mounted() {
    this.bodyHeight = document.documentElement.clientHeight
  },
  methods: {
    // 获取用户租户列表
    getUserList() {
      getHandle('/agri/api/common/userManage/queryUserTenantList', {
        loginUserId: getValue('loginUserId')
      }).then(res => {
        // 缓存租户编码等数据
        console.log(res)
        if (res.status === 999999) {
          Toast(res.msg)
          return
        }
        const datas = res.data.rows[0]
        setObject(res.data.rows[0])
        if (datas.auditStatus === 0) {
          // 待审核
          Toast('您的账号已提交至管理人员审核，审核通过后可登录！！')
          return
        } else if (datas.auditStatus === 2) {
          // 驳回 / 未提交信息
          this.$bridge.call('reviewResults')
          return
        } else if (datas.auditStatus === 99) {
          // 未完成信息填写 -》跳转信息填写页
          this.$bridge.call('addExpertInfo')
          return
        } else {

          setValue('loginSuccess', 1)
          if (datas.roleCode === 'expert') {
            setValue('role_type', 1)
          } else if (!datas.roleCode) {
            setValue('role_type', 0)
          } else {
            setValue('role_type', 2)
          }
          this.loginData.tenantCode = res.data.rows[0].tenantCode
          this.loginData.subjectEnterpriseType = res.data.rows[0].subjectEnterpriseType

          this.loginData.milkStationFlag = res.data.rows[0].milkStationFlag
          this.loginData.subjectInfoId = res.data.rows[0].subjectInfoId

          //  alert(JSON.stringify(this.loginData));

          this.$bridge.call('index', this.loginData)
        }
      })
    },
    getFormkey() {
      return new Promise((resolve, reject) => {
        getHandle('/venues/api/exhibitionManage/formKey/queryAllList').then(
          res => {
            console.log(res)
            setValue('formKey', JSON.stringify(res.body.data))
            resolve(res.body.data)
          },
          err => {
            console.log(err)
          }
        )
      })
    },

    login() {
      clear()
      // 账号密码登录
      var sha1 = crypto.createHash('sha1')
      sha1.update(this.userPossword)
      const password_sha = sha1.digest('hex')
      if (this.userName == null || this.userName.trim() == '') {
        this.$toast('请输入账号')
        return false
      }
      if (this.userPossword == null || this.userPossword.trim() == '') {
        this.$toast('请输入密码')
        return false
      }
      if (this.yzmCode == null || this.yzmCode.trim() == '') {
        this.$toast('请输入验证码')
        return false
      }
      if (this.isKeep) {
        setValue('loginPageUserName', this.userName)
      } else {
        setValue('loginPageUserName', '')
      }
      const params = {
        loginName: this.userName,
        password: password_sha,
        captcha: this.yzmCode,
        codeImgId: this.yamId,
        callChannel: '1',
        mobileType: '1'
      }
      const self = this
      Toast.loading({
        message: '登录中...',
        duration: 0,
        forbidClick: true,
        loadingType: 'spinner'
      })
      postHandle('/agri/api/common/loginManage/login', params).then(
        res => {
          console.log(res)
          // debugger
          if (res.status !== 0) {
            Toast.clear()
            Toast.fail('账号密码不匹配')
            this.getYzmCode()
            return
          }
          setObject(res.data)
          this.loginData = res.data
          setValue('userAccId', res.data.loginUserId)
          // 登录成功 调取获取用户租户列表
          this.getUserList()
          Toast.clear()
        },
        err => {
          Toast.clear()
          this.getYzmCode()
          console.log(err)
        }
      )
    },
    forgetPasswordOnclick() {
      // 忘记密码
      console.log('235678')
      this.$bridge.call('forgetPassword')
    },
    reginer() {
      this.$bridge.call('reginer')
    },

    changType(num) {
      this.type = num
    },
    getYzmCode() {
      getHandle('/agri/api/common/loginManage/getCode').then(res => {
        // console.log(res);
        this.yzmUrl = res.data.imgBase64Str
        this.yamId = res.data.codeImgId
        this.yzmCode = ''
      })
    },
    // 看不清换一张
    isChange() {
      this.getYzmCode()
    },
    getYzm() {
      if (this.num != 59) {
        return
      }
      const phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/
      if (!phoneReg.test(this.form.mobilePhone)) {
        Toast('请输入正确手机号')
        return
      } else {
        this.phoneError = false
      }

      const condition = Object.assign({}, this.form)

      condition.scene = 'PHONE_CODE_LOGIN'

      var sha1 = crypto.createHash('sha1')
      sha1.update(this.form.mobilePhone.split('').reverse().join(''))
      const code_sha = sha1.digest('hex').substring(10, 20)
      condition.sign = code_sha
      postHandle('/venues/api/sms/phoneCode/sendPhoneCode', condition)
        .then(() => {
          Toast('发送成功')

          this.disabled = true
          const int = setInterval(() => {
            this.text = this.num + 's'
            this.num--
            if (this.num === 0) {
              this.disabled = false
              clearInterval(int)
              this.text = '发送验证码'
              this.num = 59
            }
          }, 1000)
        })
        .catch(err => {
          console.log(err)

          Toast(err)
          return
        })
    }
  }
}
</script>

<style scoped>
.password-visible {
  position: absolute;
  right: 0;
  top: 13px;
}
.password-visible img {
  width: 100%;
  height: 100%;
}
.switchPassword {
  position: absolute;
  right: 0;
  top: 8px;
  line-height: 24px;
}
.switchPassword::before {
  content: '123';
  font-size: 10px;
  position: relative;
  top: -3px;
  left: 1px;
  color: #fff;
}
.switchPassword::after {
  content: '***';
  font-size: 10px;
  position: relative;
  top: -2px;
  right: -4px;
  color: #fff;
}
.yzmCode {
  background-image: url('~@/assets/img/login/yzm-icon.png');
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: 0 16px;
}
.password {
  background-image: url('~@/assets/img/login/password-icon.png');
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: 0 16px;
}
.userName {
  background-image: url('~@/assets/img/login/userName-icon.png');
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: 0 16px;
}
.passwordBox {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  /* margin-bottom: 40px; */
  font-weight: 400;
  color: #999999;
  line-height: 20px;
  font-size: 14px;
}
.page {
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
}

.header {
  position: relative;
  overflow: hidden;
  height: 200px;
}
.min-logo {
  position: absolute;
  left: 50%;
  width: 68px;
  height: 68px;
  margin-left: -34px;
  top: 146px;
}
.header .max-logo {
  width: 100%;
  /* height: 100%; */
}
.logo {
  display: block;
  margin-bottom: 20px;
  width: 64px;
  height: 64px;
}

.footer {
  width: 100%;
  padding: 30px;
  padding-top: 0;
  min-height: 337px;
  margin-top: 30px;
}

.loginTitle {
  text-align: center;
  height: 25px;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 25px;
  background-color: red;
}
.loginMinTitle {
  height: 19px;
  font-size: 14px;
  font-family: Avenir-Book, Avenir;
  font-weight: normal;
  color: #333333;
  line-height: 19px;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 23px;
}
.inpBox {
  width: 100%;
  height: 50px;
  position: relative;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.inpIcon {
  width: 15px;
  height: 16px;
  position: absolute;
  top: 17px;
  left: 0;
}

.inp {
  width: 100%;
  height: 100%;
  /* border-bottom: 1px solid #ddd; */
  font-size: 16px;
  color: #333333;
  font-weight: 400;
  padding-left: 31px;
}
.yzm {
  display: inline-block;
  width: calc(100% - 100px);
}

.loginBtn {
  width: 100%;
  height: 45px;
  background-color: #37b5b5;
  border-radius: 2px;
  color: #ffffff;
  font-size: 16px;
  line-height: 45px;
  text-align: center;
  margin-top: 30px;
}
.loginType {
  width: 100%;
  /* position: fixed;
  left: 0;
  bottom: 25px; */
}
.loginTypeBox {
  width: 100%;
  height: 60px;
  /* border: 1px solid #000000; */
  padding: 0 30px;
  position: relative;
}
.isLine {
  width: calc(100% - 60px);
  border-bottom: 1px solid #d8d8d8;
  position: absolute;
  top: 15px;
  left: 30px;
}
.isOr {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  width: 100px;
  position: absolute;
  top: 6px;
  left: calc(50% - 50px);
  background: #ffffff;
  text-align: center;
}
.isType {
  font-size: 14px;
  font-weight: 400;
  color: #1890ff;
  width: 100%;
  text-align: center;
  padding-top: 35px;
}
.getYzm {
  font-size: 14px;
  font-weight: 400;
  color: #1890ff;
  text-align: right;
  display: inline-block;
  width: 100px;
  line-height: 50px;
}
.yzm-code {
  position: absolute;
  top: 6px;
  right: -20px;
}
</style>
